<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>添加</title>
		<link rel="stylesheet" href="layui/css/layui.css" />
	</head>
	<body>
		<div class="layui-container" style="margin-top: 10px;">
			<div class="layui-row">
				<div class="layui-col-md8 layui-col-md-offset2">
					<form class="layui-form layui-form-pane">
						<div class="layui-form-item">
							<label class="layui-form-label">图书名称</label>
							<div class="layui-input-block">
								<input type="text" name="bookName" autocomplete="off" placeholder="图书名称..."
									lay-verify="required" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">图书作者</label>
							<div class="layui-input-block">
								<input type="text" name="authorName" autocomplete="off" placeholder="图书作者..."
									lay-verify="required" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">图书价格</label>
							<div class="layui-input-block">
								<input type="text" name="price" autocomplete="off" placeholder="图书价格..."
									lay-verify="required" class="layui-input">
							</div>
						</div>

						<div class="layui-form-item">
							<label class="layui-form-label">图书封面</label>
							<div class="layui-input-block">
								<div class="layui-upload-drag" style="display: block;" id="ID-upload-demo-drag">
									<i class="layui-icon layui-icon-upload"></i>
									<div>点击上传，或将文件拖拽到此处</div>
									<div class="layui-hide" id="ID-upload-demo-preview">
										<hr> <img src="" alt="上传成功后渲染" style="max-width: 100%">
									</div>
								</div>
							</div>
							<!-- 隐藏域 -->
							<input type="hidden" name="bookAddress" id="bookAddress" />
							<input type="hidden" name="bookUrl" id="bookUrl" />
						</div>

						<div class="layui-form-item">
							<label class="layui-form-label">图书分类</label>
							<div class="layui-input-inline">
								<select name="categoryId" id="categoryId"></select>
							</div>
						</div>

						<div class="layui-form-item" pane>
							<label class="layui-form-label">是否上架</label>
							<div class="layui-input-block">
								<input type="radio" name="status" value="1" title="上架" checked>
								<input type="radio" name="status" value="0" title="下架">
							</div>
						</div>

						<div class="layui-form-item" pane>
							<label class="layui-form-label">创建时间</label>
							<div class="layui-input-block">
								<input type="text " name="createTime" class="layui-input" id="createTime"
									placeholder="yyyy/MM/dd HH:mm:ss">
							</div>
						</div>

						<div class="layui-form-item">
							<button class="layui-btn" lay-submit lay-filter="add">添加图书</button>
							<button type="reset" class="layui-btn layui-btn-primary">重置</button>
						</div>
					</form>
				</div>

			</div>

		</div>


		<script src="layui/layui.js"></script>
		<script>
			layui.use(function() {

				let laydate = layui.laydate;
				let $ = layui.$;
				let layer = layui.layer;
				let form = layui.form;
				let upload = layui.upload;
				
				// 表单提交时间
				form.on("submit(add)", function(data)
				{
					// 获取表单提交数据
					let field = data.field;
					
					// ajax向后端发送请求
					$.ajax({
						type: "post",
						url: "http://127.0.0.1:8080/addBook",
						data: JSON.stringify(field),
						contentType: "application/json",
						dataType: "json",
						success: function(d)
						{
							if (d.code == 0)
							{
								// 关闭弹出层
								let index = parent.layer.getFrameIndex(window.name);// 先得到当前iframe层的索引
								parent.layer.close(index);
							}
							else
							{
								// 失败
								layer.msg(d.msg);
							}
						}
					});
					
					// 组织表单默认提交
					return false;
				});

				// 图片上传
				upload.render({
					elem: '#ID-upload-demo-drag',
					url: 'http://127.0.0.1:8080/uploadFile', // 实际使用时改成您自己的上传接口即可。
					done: function(res)
					{
						// 将图片的服务器地址和本机真实地址设置到对应的隐藏域中
						$("#bookAddress").val(res.data.bookAddress);
						$("#bookUrl").val(res.data.bookUrl);
						
						layer.msg('上传成功');
						$('#ID-upload-demo-preview').removeClass('layui-hide')
						.find('img').attr('src', "http://127.0.0.1:8080" + res.data.bookUrl);
					}
				});

				// 获取图书分类信息
				$.getJSON("http://127.0.0.1:8080/getCategoryList", function(d) {
					if (d.code == 0) {
						let list = d.data;
						let str = '<option value=""></option>';
						$.each(list, function(index, value)
						{
							str += '<option value="' + value.categoryId + '">' + value.categoryName +
								'</option>';
						});

						// 将拼接好的字符串设置到分类的位置
						$('#categoryId').html(str);

						// 重新渲染表单的下拉框
						form.render('select');
					} else {
						layer.msg(d.msg);
					}
				});

				// 生成时间控件
				laydate.render({
					elem: '#createTime',
					type: 'datetime',
					value: new Date(),
					format: 'yyyy/MM/dd HH:mm:ss'
				});

			});
		</script>
	</body>
</html>